<template>
  <form-dialop
    :title="$t('order.editOrderBandwidth')"
    :visible="visible"
    width="35%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form
        ref="form"
        :model="formData"
        :rules="formRule"
        label-width="120px"
        v-loading="loading"
      >
        <el-form-item
          :label="$t('order.orderBandwidth')"
          prop="band_width"
          name="band_width"
        >
          <el-input
						class="number"
            type="number"
            :min="0"
            :max="2048"
            @input="(value) => (formData.band_width = parseInt(value))"
            v-model="formData.band_width"
            @keyup.enter.native="submit"
          ></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t("common.cancel") }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{
        $t("common.confirm")
      }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from "vue";
import FormDialop from "../../../../components/Dialog/formDialog.vue";
import { AppModule } from "../../../../store/modules/app";
import { isValidURL } from "../../../../utils/validate";
export default Vue.extend({
  components: {
    FormDialop,
  },
  data() {
    return {
      visible: false,
      loading: false,
      language: AppModule.language,
      formData: {
        band_width: 100,
      },
      formRule: {
        band_width: [
          {
            required: true,
            message: this.$t("order.formValite.bandwidth"),
            trigger: "blur",
          },
          {
            validator: (rule: any, value: any, callback: any) => {
              if (value !== "" && value > 2048) {
                callback(
                  new Error(this.$t("order.formValite.maxBandWidth").toString())
                );
              } else if (!value || value === '') {
								callback(
									new Error(this.$t("order.formValite.bandwidth").toString())
								)
							} else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      data: {},
    };
  },
  created() {},
  methods: {
    async init(obj: any) {
      this.data = obj.data;
      this.formData = {
        band_width: 100,
      };
      if (obj.data.band_width) {
        this.formData.band_width = obj.data.band_width;
      }
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          (this.$refs["form"] as any).clearValidate();
        }
      });
      this.visible = true;
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
					this.loading = true;
					(this as any).$orinusApi.apiEditOrderBandwidth((this as any).data.order_id,this.formData).then((res: any) => {
						this.loading = false;
						if (res.code === 200) {
							this.visible = false;
              this.$emit("success");
							this.$message({
								message: this.$t("order.editBandwidthSuc").toString(),
								type: "success",
							});
						} else {
								this.$message({
								message: this.$t("order.editBandwidthFail").toString(),
								type: "warning",
							});
						}
					}).catch(() => {
						this.loading = false;
						this.$message({
							message: this.$t("order.editBandwidthFail").toString(),
							type: "warning",
						});
					})
        }
      });
    },
    handleClose() {
      (this.formData = {
        band_width: 100,
      }),
      (this.visible = false);
      this.loading = false;
    },
  },
});
</script>
